<template>
  <div class="cmp-diagnostic-tips inline-block">
    <el-button
      type="danger"
      @click="diagnosticNoticeModal = true"
      class="diagnostic-notice"
    >
      诊断注意事项
    </el-button>
    <!-- 诊断提示 -->
    <el-dialog
      v-model="diagnosticNoticeModal"
      title="诊断注意事项"
      :append-to-body="true"
    >
      <div>
        <h3>出现以下任一征象提示哮喘以外的其他诊断并建议转诊进一步评估：</h3>
        <ul>
          <li>1.生长发育落后</li>
          <li>2.新生儿期或婴儿早期发病(尤其是伴有生长发育迟缓)</li>
          <li>3.伴有呼吸道症状的呕吐</li>
          <li>4.持续性喘息</li>
          <li>5.对哮喘治疗药物无治疗反应（ICS，口服激素或SABA）</li>
          <li>6.症状与病毒性上呼吸道感染等常见诱发因素无关</li>
          <li>7.局灶性肺部或心血管体征，或杵状指</li>
          <li>8.非病毒感染期的低氧血症</li>
        </ul>
      </div>
      <template #footer>
        <el-button @click="diagnosticNoticeModal = false">返回</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        diagnosticNoticeModal: false, //诊断提示框
      }
    },
  }
</script>
<style lang="scss" scoped>
  .cmp-diagnostic-tips {
    // float: right;
    // margin-right: 12px;
    // margin-left: 0px;
    .inline-block {
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      line-height: 0;
    }
    .diagnostic-notice {
      font-size: 12px;
      margin-bottom: 6px;
    }

    ul > li {
      padding-left: 1rem;
      line-height: 2;
      font-size: 14px;
      font-weight: bold;
      color: #f0565c;
    }
  }
</style>
